<template>
  <view class="container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card">
      <image class="avatar" :src="userinfo.avatarUrl" mode="aspectFill"></image>
      <view class="user-meta">
        <view class="username">{{userinfo.nickName}}</view>
        <view class="user-level">
          <uni-tag text="LV1" type="warning" size="mini" class="level-tag"></uni-tag>
          <text class="level-text">阅读达人</text>
        </view>
      </view>
      <view class="user-stats">
        <view 
          class="stat-item" 
          v-for="(stat, index) in userStats" 
          :key="index"
          @click="handleStatClick(index)"
        >
          <text class="stat-value">{{stat.value}}</text>
          <text class="stat-label">{{stat.label}}</text>
        </view>
      </view>
    </view>

    <!-- 快捷功能菜单 -->
    <view class="quick-menu">
      <navigator 
        class="menu-item" 
        v-for="item in quickMenus" 
        :key="item.text"
        :url="item.url"
        hover-class="menu-item-hover"
      >
        <image class="menu-icon" :src="item.icon"></image>
        <view class="menu-text">{{item.text}}</view>
      </navigator>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <navigator 
        class="function-item" 
        v-for="item in functionItems" 
        :key="item.text"
        :url="item.url"
        hover-class="function-item-hover"
      >
        <view class="function-left">
          <text>{{item.text}}</text>
        </view>
        <uni-icons type="right" color="#999"></uni-icons>
      </navigator>
    </view>

    <!-- 退出按钮 -->
    <view class="logout-btn">
      <button class="custom-btn" @click="logout" hover-class="btn-hover">退出登录</button>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: "my-userinfo",
  computed: {
    ...mapState('m_user', ['userinfo']),
  },
  data() {
    return {
      userStats: [
        { value: 128, label: '笔记' },
        { value: 36, label: '关注' },
        { value: 89, label: '粉丝' }
      ],
      quickMenus: [
        { text: '签到', icon: '/static/icon/qiandao.png', url: '/subpkg/sign_in/sign_in' },
        { text: '浏览记录', icon: '/static/icon/record.png', url: '/subpkg/history/history' },
        { text: '笔记/书评', icon: '/static/icon/note.png', url: '/subpkg/note_review/note_review' },
        { text: '成就', icon: '/static/icon/goals.png', url: '/subpkg/achievement/achievement' }
      ],
      functionItems: [
        { text: '个人信息', url: '/subpkg/my_info/my_info' },
        { text: '我的收藏', url: '/subpkg/my_fav/my_fav' },
        { text: '阅读数据', url: '/subpkg/reading-analytics/reading-analytics' },
        { text: '系统设置', url: '/subpkg/setting/setting' }
      ]
    }
  },
  methods: {
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
    ...mapMutations('m_book', ['updateBookList']),
    
    handleStatClick(index) {
      // 可以在这里添加统计项的点击处理逻辑
      const routes = ['/subpkg/note_review/note_review', '/subpkg/follow/follow', '/subpkg/fans/fans']
      uni.navigateTo({ url: routes[index] })
    },
    
    async logout() {
      const [err, res] = await uni.showModal({
        title: '温馨提示',
        content: '确定要退出登录吗？',
        confirmColor: '#FF4D4F'
      })

      if (res.confirm) {
        uni.showLoading({ title: '正在退出...' })
        
        setTimeout(() => {
          this.updateUserInfo({})
          this.updateToken('')
          this.updateBookList([])
          uni.hideLoading()
          uni.showToast({ title: '已退出', icon: 'success' })
        }, 800)
      }
    }
  }
}
</script>

<style lang="scss">
  /* 颜色变量 */
  $primary-color: #2A5CAA;
  $secondary-color: #FFC107;
  $bg-color: #f8f9fa;
  $card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  $border-radius: 16rpx;
  $transition: all 0.3s ease;

  .container {
    background-color: $bg-color;
    min-height: 100vh;
    padding-bottom: 40rpx;
  }

  /* 用户卡片 */
  .user-card {
    background: linear-gradient(135deg, $primary-color, #3a7bd5);
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    color: white;
    border-radius: 0 0 $border-radius*2 $border-radius*2;
    box-shadow: $card-shadow;
    position: relative;
    z-index: 1;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      transition: $transition;
      
      &:active {
        transform: scale(0.95);
      }
    }

    .user-meta {
      margin-left: 30rpx;
      flex: 1;

      .username {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .user-level {
        display: flex;
        align-items: center;

        .level-tag {
          transform: scale(0.9);
        }

        .level-text {
          font-size: 24rpx;
          margin-left: 15rpx;
          opacity: 0.9;
        }
      }
    }

    .user-stats {
      display: flex;
      text-align: center;

      .stat-item {
        padding: 0 20rpx;
        transition: $transition;
        
        &:active {
          opacity: 0.8;
          transform: scale(0.95);
        }

        .stat-value {
          display: block;
          font-size: 32rpx;
          font-weight: bold;
        }

        .stat-label {
          font-size: 24rpx;
          opacity: 0.8;
        }
      }
    }
  }

  /* 快捷菜单 */
  .quick-menu {
    display: flex;
    background-color: #FFFFFF;
    height: 140rpx;
    justify-content: space-around;
    padding: 20rpx;
    border-radius: $border-radius;
    margin: 20rpx;
    box-shadow: $card-shadow;

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex: 1;
      transition: $transition;

      .menu-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }

      .menu-text {
        font-size: 14px;
        color: #2e2e2e;
      }
    }
    
    .menu-item-hover {
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: $border-radius;
    }
  }

  /* 功能列表 */
  .function-list {
    background: white;
    margin: 20rpx;
    border-radius: $border-radius;
    overflow: hidden;
    box-shadow: $card-shadow;

    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      transition: $transition;
      
      &:last-child {
        border-bottom: none;
      }

      .function-left {
        display: flex;
        align-items: center;
      }
    }
    
    .function-item-hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
  }

  /* 退出按钮 */
  .logout-btn {
    margin: 40rpx 20rpx 0;

    .custom-btn {
      background: white;
      color: #ff4d4f;
      border: none;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 45rpx;
      font-size: 32rpx;
      box-shadow: $card-shadow;
      transition: $transition;

      &::after {
        border: none;
      }
    }
    
    .btn-hover {
      background-color: rgba(255, 77, 79, 0.1);
    }
  }
</style>